<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>歌手管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="singerSearchKey" placeholder="输入歌手名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search"
                   @click="getAllSinger((pageParam.currentPage * pageParam.pageSize) - pageParam.pageSize, pageParam.pageSize, singerSearchKey)">
          搜索
        </el-button>
        <el-popconfirm
          style="margin-left: 10px"
          confirm-button-text='继续'
          cancel-button-text='取消'
          icon="el-icon-info"
          title="同步操作可能时间较长，是否继续"
          @confirm="syncSinger"
        >
          <el-button size="small" type="primary" icon="el-icon-refresh"  slot="reference"  :loading="syncLoading">
            同步更新酷狗歌手
          </el-button>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="singerList" highlight-current-row border element-loading-text="拼命加载中"
              style="width: 100%;text-align: center">
      <el-table-column sortable prop="imgUrl" label="歌手头像" width="200" align="center">
        <template slot-scope="scope">
          <el-image :src="scope.row.imgUrl" style="width: 100px;height: 100px"></el-image>
        </template>
      </el-table-column>
      <el-table-column sortable prop="singerName" label="歌手名" width="200">
      </el-table-column>
      <el-table-column sortable prop="heat" label="歌手热度" width="200">
      </el-table-column>
      <el-table-column sortable prop="fansCount" label="粉丝数量" width="200">
      </el-table-column>
      <el-table-column sortable prop="mvCount" label="MV数量" width="100">
      </el-table-column>
      <el-table-column sortable prop="songCount" label="歌曲数量" width="100">
      </el-table-column>
      <el-table-column sortable prop="albumCount" label="专辑数量">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="showSingerDetail(scope.$index)">详情</el-button>
          <el-button size="mini" @click="updateSinger(scope.row.singerId)">自动补充</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParam.currentPage"
      :page-sizes="[10, 50, 100, 500]"
      :page-size="pageParam.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageParam.total">
    </el-pagination>
    <!--详情-->
    <el-dialog title="歌手详情" :visible.sync="singerInfoVisible" width="60%">
      <el-descriptions :column="3" border>
        <el-descriptions-item>
          <template slot="label">
            歌手ID
          </template>
          {{singerList[singerDialog].singerId}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            歌手名
          </template>
          {{singerList[singerDialog].singerName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            粉丝数量
          </template>
          {{singerList[singerDialog].fansCount}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            专辑数量
          </template>
          {{singerList[singerDialog].mvCount}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            歌曲数量
          </template>
          {{singerList[singerDialog].songCount}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            专辑数量
          </template>
          {{singerList[singerDialog].albumCount}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            歌手简介
          </template>
          {{singerList[singerDialog].intro}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Singer",
    data() {
      return {
        singerSearchKey: '',
        // 分页参数
        pageParam: {
          currentPage: 1,
          pageSize: 10,
          total: 1000
        },
        singerList: [],
        singerDialog: 0,
        singerInfoVisible: false,
        addSingerVisible: false,
        syncLoading: false,
      }
    },
    created() {
      this.getAllSinger((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, '')
    },
    methods: {
      //更新单个歌手
      updateSinger(singerId){
        this.$axios({
          method:'post',
          url:'/musicControl/updateOneSingerDetail/'+singerId,
          headers:{
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res=>{
          if (res.data.msgCode === '200') {
            this.$message.success('同步成功');
          } else {
            this.$message.warning('同步失败');
          }
          this.getAllSinger((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.singerSearchKey)
        })
      },
      //更新歌手信息
      syncSinger() {
        this.syncLoading = true;
        this.$axios({
          method: 'post',
          url:'/musicControl/updateSinger',
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res=>{
          if (res.data.msgCode === '200') {
            this.$message.success(res.data.msg);
          } else {
            this.$message.warning(res.data.msg);
          }
          this.syncLoading = false;
        })
      },
      showSingerDetail(index) {
        this.singerInfoVisible = true;
        this.singerDialog = index;
      },
      getAllSinger(start, size, searchKey) {
        this.$axios({
          method: 'post',
          url: '/musicControl/getAllSinger/' + start + "/" + size,
          data: {
            singerSearchKey: searchKey,
          },
          headers: {
            authentication: localStorage.getItem("adminToken")
          }
        }).then(res => {
          this.pageParam.total = res.data.data.total;
          if (this.pageParam.total === 0) {
            this.singerList = [{singerName: '未找到该歌手'}]
          } else {
            this.singerList = res.data.data.info;
          }
        })
      },
      handleSizeChange(item) {
        this.pageParam.pageSize = item;
        this.getAllSinger((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.singerSearchKey)
      },
      //页数改变时
      handleCurrentChange(item) {
        this.pageParam.currentPage = item;
        this.getAllSinger((this.pageParam.currentPage * this.pageParam.pageSize) - this.pageParam.pageSize, this.pageParam.pageSize, this.singerSearchKey)
      },
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }
</style>
